<template>
  <div id="app">
    <transition name="slide">
      <side-menu v-show="isShow" @hideMenu="hideMenus">

      </side-menu>
    </transition>
    <router-view></router-view>
  </div>
</template>

<script>
//  导入侧边栏组件
  import SideMenu from './components/SideMenu'
  import bus from './bus'
export default {
  name: 'app',
  data:function(){
      return {
          isShow:false
      }
  },
  methods:{
      showItem:function(){
          this.isShow = true
      },
      hideMenus:function(){
          this.isShow = false
      }
  },
//   非父子组件之间的通信，借助于一个空实例对象；bus
//  bus.$emit(event)触发一个事件
//  bus.$on(event)监听当前事件，并执行回调函数
  mounted:function(){
      var that = this
      bus.$on('showMenu', function(){
        that.showItem()
      })
  },
  components:{
      SideMenu
  }
}
</script>

<style scoped>
#app {
  /*font-family: 'Avenir', Helvetica, Arial, sans-serif;*/
  /*-webkit-font-smoothing: antialiased;*/
  /*-moz-osx-font-smoothing: grayscale;*/
  /*text-align: center;*/
  /*color: #2c3e50;*/
  /*margin-top: 60px;*/
}
  .slide-enter,.slide-leave-active{
      transform:translate(-100%); opacity:0;
  }
  .slide-enter-active,.slide-leave-active{
    transition:all .7s;
  }
</style>
